<template>
  <div id="app">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="we-grid" name="grid">
        <div class="apimenu-header">
          <a target="_blank" href="https://gitee.com/sulir/we-vue-element/blob/develop/examples/views/grid/grid_1.vue">查看代码</a>
          <div class="apimenu-row">
            <a class="apimenu-title">基础功能</a>
            <router-link class="apimenu-link" :to="{name: 'grid_1'}" replace>基础</router-link>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="we-editor" name="editor">
        <div class="apimenu-header">
          <a target="_blank" href="https://gitee.com/sulir/we-vue-element/blob/develop/examples/views/editor/editor_1.vue">查看代码</a>
          <div class="apimenu-row">
            <a class="apimenu-title">基础功能</a>
            <router-link class="apimenu-link" :to="{name: 'editor'}" replace>基础</router-link>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="we-search" name="search">
        <div class="apimenu-header">
          <a target="_blank" href="https://gitee.com/sulir/we-vue-element/blob/develop/examples/views/search/search.vue">查看代码</a>
          <div class="apimenu-row">
            <a class="apimenu-title">基础功能</a>
            <router-link class="apimenu-link" :to="{name: 'search'}" replace>基础</router-link>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="view-body">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    const name = location.hash.split('/')[1];
    return {
      activeName: ['grid', 'editable', 'search'].includes(name) ? name : 'grid',
    };
  },
  methods: {
    handleClick (tab) {
      if (tab.name === 'grid') {
        this.$router.replace({ name: 'grid' });
      }
      if (tab.name === 'editor') {
        this.$router.replace({ name: 'editor' })
      }
      if (tab.name === 'search') {
        this.$router.replace({ name: 'search' })
      }
    },
  },
};
</script>

<style>
#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.view-body {
  margin: 0 20px;
}
.apimenu-header {
  margin-bottom: 10px;
}
.apimenu-title {
  font-weight: 700;
  font-size: 14px;
}
.apimenu-link {
  margin: 2px;
  padding: 2px 4px;
  color: #606266;
  border: 1px solid #dcdfe6;
  display: inline-block;
  font-size: 12px;
  border-radius: 2px;
  text-decoration: none;
}
.apimenu-link:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.apimenu-link.router-link-exact-active,
.apimenu-link.router-link-exact-active:hover {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
</style>
